<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>

      <el-input clearable placeholder="请输入内容" class="search-main" v-model="params.name"/>
      <el-button type="primary" @click="search">查询</el-button>

    </div>

    <div class="create-container">
      <el-button type="primary" @click="$router.push('/enterpriseAdd')">添加企业</el-button>
      
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="enterpriseList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="企业名称" width="320" prop="name" />
        <el-table-column label="联系人" prop="contact" />
        <el-table-column
          label="联系电话"
          prop="contactNumber"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" >添加合同</el-button>

            <el-button size="mini" type="text">查看</el-button>
                                              <!-- :disabled="scope.row.existContractFlag" -->
            <el-button size="mini" type="text" >编辑</el-button>
                                                <!-- 编辑和删除按钮的禁用状态，由于数据为数字类型，所以使用表达式 -->
            <el-button size="mini" type="text" :disabled="scope.row.existContractFlag === 1">删除</el-button>

          </template>

        </el-table-column>

      </el-table>

    </div>

    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </div>

  </div>

</template>
<script>
// 引入api
import {getEnterpriseListAPI} from '@/api/user'
export default{
  data(){
    return{
      enterpriseList:[] , // 企业列表
      total:0,
       params: {
          page: 1,
          pageSize: 5,
          name:''
        },
      }

    },
  
  methods:{
    // 点击查询按钮，执行搜索操作
    search(){
      this.params.page = 1
      this.getEnterpriseList()
    },
    // 获取企业列表
    async getEnterpriseList(){
      const {data} = await getEnterpriseListAPI(this.params)
      this.enterpriseList = data.rows
      // 获取总条数
      this.total = data.total
      console.log(data.rows);
      
    },
    pageChange(page){
      this.params.page = page
      this.getEnterpriseList()
    }
  },
  // 获取数据后，在mounted中执行渲染
  mounted(){
    this.getEnterpriseList()
  },
  
  
}
 
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
